<template>
    <el-dialog v-model="visible" :show-close="false" ref="dialogRef" class="d-dialog" id="d-dialog"
        :style="{ '--el-dialog-width': fullFlag ? '100%' : '1000px' }" :fullscreen="fullFlag" append-to-body>
        <template #footer>
        </template>
        <div class="d-dialog-header"></div>
        <div class="d-dialog-body">
            <div class="d-dialog-tool" flex>
                <div class="full-icon header-icon flex-center" title="全屏" @click="fullFlag = !fullFlag">
                    <el-icon size="12" color="white">
                        <FullScreen />
                    </el-icon>
                </div>
                <div class="close-icon header-icon flex-center" title="关闭" @click="handleClose">
                    <el-icon size="12" color="white">
                        <Close />
                    </el-icon>
                </div>
            </div>
            <slot></slot>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { FullScreen, Close } from '@element-plus/icons-vue'
import { ElDialog } from 'element-plus';

const emits = defineEmits(['close'])

const dialogRef = ref<typeof ElDialog>()
const visible = ref(false)
const fullFlag = ref(false)

const show = () => {
    visible.value = true
}

const handleClose = () => {
    visible.value = false
    emits('close')
}

defineExpose({
    show,
    handleClose
})
</script>

<style lang="scss">
.d-dialog,
#d-dialog {
    --el-dialog-width: 1000px;
    min-height: 300px;
    min-height: 300px;
    box-shadow: 0 12px 32px #0000007a;
    border-radius: 6px;
    overflow: hidden;
    color: var(--d-main);

    .el-dialog__header {
        height: 0;
        padding: 0;
    }

    .el-dialog__body {
        padding: 0;
        height: 100%;
    }

    .el-dialog__footer {
        padding: 0;
    }

    .d-dialog-body {
        height: 600px;
        position: relative;

        .d-dialog-tool {
            position: absolute;
            top: 10px;
            right: 0;

            .header-icon {
                width: 20px;
                height: 20px;
                line-height: 20px;
                border-radius: 50%;
                font-size: 14px;
                background-color: rgba(var(--alpha-color), .2);
                margin-right: 6px;
            }

            .full-icon {
                &:hover {
                    background-color: rgba(var(--alpha-color), .6);
                }
            }

            .close-icon {
                &:hover {
                    background-color: #e81123;
                }
            }
        }

    }
}

.d-dialog {
    &.is-fullscreen {
        .d-dialog-body {
            height: 100% !important;
        }
    }
}</style>